<!--
 * @Description: modal公共组件
 * @Author: Zhanghan
 * @Date: 2024-10-22 16:48:39
 * @LastEditTime: 2025-07-10 14:59:50
 * @LastEditors: ZhangHan
-->
<template>
  <div>
    <el-dialog
      v-model="visible"
      :width="width"
      :before-close="handleBeforeClose && handleBeforeClose"
      :draggable="true"
      :destroy-on-close="true"
      :show-close="false"
      :fullscreen="ifSreenFull"
      class="pro_dialog"
      :lock-scroll="true"
      :append-to-body="true"
      :top="'200px'"
    >
      <ElScrollbar :max-height="ifSreenFull ? '80vh' : '63vh'">
        <slot></slot>
      </ElScrollbar>

      <template #header v-if="!$slots.header">
        <div class="proHeader">
          <div class="proHeader_left">{{ title }}</div>
          <div class="proHeader_right">
            <ElTooltip
              effect="dark"
              content="最大化"
              placement="bottom"
              v-if="!ifSreenFull"
            >
              <ElIcon size="20" @click="handleFullScreen">
                <FullScreen /></ElIcon
            ></ElTooltip>
            <ElTooltip effect="dark" content="还原" placement="bottom" v-else>
              <ElIcon size="20" @click="handleFullScreen"> <Aim /></ElIcon
            ></ElTooltip>
            <ElTooltip effect="dark" content="关闭" placement="bottom">
              <ElIcon size="20" @click="close">
                <Close />
              </ElIcon>
            </ElTooltip>
          </div>
        </div>
      </template>
      <!-- 自定义头部 -->
      <template #header v-if="$slots.header">
        <slot name="header"></slot>
      </template>
      <!-- 默认footer底部 -->
      <template #footer v-if="!$slots.footer">
        <div class="dialog-footer">
          <ElButton @click="handleCancel" :loading="loading">{{
            cancelText
          }}</ElButton>
          <ElButton
            type="primary"
            @click="handleOk"
            v-if="ifShowOkBtn"
            :loading="loading"
          >
            {{ okText }}
          </ElButton>
        </div>
      </template>
      <!-- 自定义footer -->
      <template #footer v-if="$slots.footer">
        <slot name="footer"></slot>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import {
  ElDialog,
  ElButton,
  ElIcon,
  ElTooltip,
  ElScrollbar,
} from "element-plus";
import { FullScreen, Close, Aim } from "@element-plus/icons-vue";
import { type ModalTypeProps } from "./type";

defineOptions({ name: "ProModal" });

// interface ModalType {
//   handleBeforeClose?: () => void;
//   width?: string;
//   title?: string;
//   cancelText?: string;
//   okText?: string;
//   ifShowOkBtn?: boolean;
//   /**
//    * 使用场景
//    * 1：创建新增逻辑弹框(确认提交调用接口添加按钮loading效果)
//    * 2：详情展示逻辑弹框
//    */
//   useType?: 1 | 2;
// }

const emits = defineEmits(["cancel", "ok"]);

const appElement = document.getElementById("app") as HTMLElement;

// const props = defineProps<ModalTypeProps>(); 原始写法

//默认值写法
const props = withDefaults(defineProps<ModalTypeProps>(), {
  width: "900",
  title: "弹框",
  cancelText: "取消",
  okText: "确认",
  ifShowOkBtn: true,
  useType: 1,
});

const loading = ref(false);

//开关
const visible = defineModel<boolean>("visible");

//是否全屏
const ifSreenFull = ref(false);

//默认关闭
const close = () => {
  visible.value = false;
  if (ifSreenFull.value) {
    ifSreenFull.value = false;
  }
};

//设置按钮加载
const setloading = (value: boolean) => {
  loading.value = value;
};

//点击取消
const handleCancel = () => {
  close();
  emits("cancel");
};

//点击确认回调
const handleOk = () => {
  // close();
  if (props?.useType === 1) {
    emits("ok");
  }
  if (props?.useType === 2) {
    close();
    emits("ok");
  }
};

//打开全屏
const handleFullScreen = () => {
  ifSreenFull.value = !ifSreenFull.value;
};

defineExpose({
  setloading,
  close,
});
</script>

<style lang="less" scoped>
@import "./index.less";
</style>
